<table class="table editable-table">
    <thead>
    <tr>
        <th class="opts"></th>
        <th class="opts"></th>
        <th>Key</th>
        <th>Value</th>
        <th>Description</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let kv of params; let i=index;">
        <td class="opts">
            <input *ngIf="!kv.required" type="checkbox" [checked]="kv.available" [(ngModel)]="kv.available">
            <input *ngIf="kv.required" type="checkbox" checked="checked" disabled>
        </td>
        <td class="opts">
            <i *ngIf="!kv.required && i < params.length - 1" class="material-icons" (click)="deleteItem(i)">delete_forever</i>
            <i *ngIf="kv.required" class="required">*</i>
            <i class="material-icons" *ngIf="addable && i == params.length - 1" (click)="addItem()">add</i>
        </td>
        <td>
            <input class="input" [(ngModel)]="kv.key" [readonly]="kv.required" (change)="paramKeyChange()">
        </td>
        <td>
            <input class="input" [(ngModel)]="kv.value" [class.error]="kv.key && !kv.match" (keyup)="changeItemValue(kv.key, paramInput.value)" #paramInput>
        </td>
        <td>
            <input class="input" [(ngModel)]="kv.description">
        </td>
    </tr>
    </tbody>
</table>
